<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的路由开发</title>
    <style>
        li{
            list-style: none;
            width: 100px;
            border: 1px solid;
            text-align: center;
        }
        .nav ul{
            display: flex;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="nav">
            <ul>
                <li>
                    <router-link to="/my?id=3">我的</router-link>
                </li>
                <li>
                    <router-link to="/find/12/张三">发现</router-link>
                </li>
            </ul>
        </div>
        <div class="viewList">
            <router-view></router-view>
        </div>
    </div>
    <!-- 我的组件模板 -->
    <template id="my">
        <div>
            <h1>{{user.name}}</h1>
            <h1>{{user.age}}</h1>
            <h1>{{user.sex}}</h1>
        </div>
    </template>
     <!-- 发现组件 -->
     <template id="find">
        <div>
            {{this.$route.path.id}}
            <h1>发现组件</h1>
            <h1>发现组件</h1>
            <h1>发现组件</h1>
        </div>
     </template>
</body>
</html>
<!-- <script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script> -->
<script type="module">
    import {} from './js/vue.js';
    import {} from './js/vue-router.js';


    //我的组件
    let my={
        template:'#my',
        props: [],
        data () {
            return {
                user:{},
            };
        },
        methods:{
            //通过
            getUserInfo(id){
                if(id==1){
                    this.user={id:'1',name:'admin',sex:'男',age:18}
                }else if(id==3){
                    this.user={id:'3',name:'张三',sex:'男',age:28}
                }
            },
        },
        created() {
            //获取路由参数
            let id =this.$route.query.id;
            this.getUserInfo(id);
        },
    };

    //发现组件
    let find={
        template:'#find',
        props: [],
    };
    //定义的路由
    let routes=[
        {path:'/my' ,component:my},
        {path:'/find/:id/:name' ,component:find},//动态参数动态路由
    ];
    const router = new VueRouter({
        routes,    
    })

    new Vue({
        el:"#app",
        data:{
            msg:"hello Vue!"
        },
        //自定义方法
        methods: {
            
        },
        computed: {
            //计算属性
        },
        router,
    });

</script>